<template>
    <div class="applyARefund bod">
        <div class="applheader">
            <div class="header_left">
                <img src="../../../assets/personal/images/shop-pic1.png">
            </div>
            <div class="header_right">
                <p>无线蓝牙键盘Ipad平板电脑安卓苹果手机迷你便捷通用Mac办公</p>
                <p class="header_rightP"><span style="color:red;">￥108.00</span><span style="float:right;color:#C1C1C1">X1</span></p>
            </div>
        </div>
        <div class="applMain">
            <ul>
                <li>
                    退款金额:<span>￥108.00</span>
                </li>
                <li>
                    货物状态<span class="xuanze" @click="huwxz(0)">{{hwMsg}}<img  src="../../../assets/personal/images/jiantou.png"></span>
                </li>
                 <li>
                    退款原因<span class="xuanze" @click="huwxz(1)">{{tkMsg}}<img src="../../../assets/personal/images/jiantou.png"></span>
                </li>
                <li v-if="4==hwoptions1"> 
                    <textarea placeholder="原因备注 (选填,最多填写100字)" class="textare" maxlength="100" v-model="instructions"></textarea>
                    <p style="float:right">{{instructions.length}}/100</p>
                </li>
            </ul>
        </div>
        <div class="credentials">
            <h1>上传凭证</h1>
            <div class="upload-img">
                <!-- <div class="top-tips">
                    <span class="text-l">上传产品详情图片</span><span style="font-size: 0.5rem;">（建议800X800）</span>
                </div> -->
                <div class="bottom-upload bottom-upload2">
                    <div class="same-box" style="width:20%;float:left;" v-for="(iu, index) in imgUrls" :key="iu.index">
                        <img :src="iu">
                        <span class="list-img-close" @click='delImage(index)'></span>
                    </div>
                    <div class="same-box" v-show="imgUrls.length<5">
                        <input class="upload-img" id="inpupimg"  type="file" @change="onFileChange"  accept="image/jpg,image/png,image/gif,image/jpeg,image/svg" multiple><!--capture="camera"-->
                        <label class="jia-icon" for="inpupimg"></label>
                    </div>
                </div>
                <p class="botre">{{imgUrls.length}}/5</p>
            </div>
        </div>
        <div class="submet">
            提交申请
        </div>
        <div class="LayerThickness" v-show="LayerThicknessOption">
            <div class="LayerThicknessWl">
                <h1>货物状态</h1>
                <ul>
                    <li>
                        <span>未收到货</span>
                        <span class="options" :class="{optionsACtive:hwoptions==0}" @click="hwoptionsClic(0)"></span>
                    </li>
                    <li>
                        <span>已收到货</span>
                        <span class="options" :class="{optionsACtive:hwoptions==1}" @click="hwoptionsClic(1)"></span>
                    </li>
                    <li>
                        <span>未使用</span>
                        <span class="options" :class="{optionsACtive:hwoptions==2}" @click="hwoptionsClic(2)"></span>
                    </li>
                </ul>
                <div class="close" @click="Close(0)">
                    关闭
                </div>
            </div>
        </div>
        <div class="LayerThickness" v-show="LayerThicknessOption1">
            <div class="LayerThicknessWl">
                <h1>货物状态</h1>
                <ul>
                    <li>
                        <span>多拍/错拍/不想要</span>
                        <span class="options" :class="{optionsACtive:hwoptions1==0}" @click="hwoptionsClic1(0)"></span>
                    </li>
                    <li>
                        <span>快递一直未送到</span>
                        <span class="options" :class="{optionsACtive:hwoptions1==1}" @click="hwoptionsClic1(1)"></span>
                    </li>
                    <li>
                        <span>快递无跟踪记录</span>
                        <span class="options" :class="{optionsACtive:hwoptions1==2}" @click="hwoptionsClic1(2)"></span>
                    </li>
                    <li>
                        <span>空包裹、少货</span>
                        <span class="options" :class="{optionsACtive:hwoptions1==3}" @click="hwoptionsClic1(3)"></span>
                    </li>
                    <li>
                        <span>其他</span>
                        <span class="options" :class="{optionsACtive:hwoptions1==4}" @click="hwoptionsClic1(4)"></span>
                    </li>
                </ul>
                <div class="close" @click="Close(1)">
                    关闭
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
    .applyARefund{
        .applheader{
            padding: 10px;
            box-sizing: border-box;
            background: #FFFFFF;
            margin-bottom: 15px;
            .header_left{
                float: left;
                img{
                    width: 80px;
                    height: 80px;
                }
                margin-right: 15px;
            }
            .header_right{
                text-align: left;
                font-size: 14px;
                .header_rightP{
                    padding: 15px 0;
                    box-sizing: border-box;
                }
            }
        }
        .applheader:after{
                display:block;
                clear:both;content:"";
                visibility:hidden;
                clear: both;
        } 
        .applMain{
            padding: 10px;
            background: #FFFFFF;
            li{
                text-align:left;
                font-weight: bold;
                line-height: 35px;
                border-bottom: 1px solid #F5F5F5;
                .textare{
                    background:#F7F7F7;
                    font-weight: 100;
                    font-size: 14px;
                    margin-bottom: -15px;
                }
                .xuanze{
                    float:right;
                    font-weight: 100;
                    font-size: 12px;
                }
                img{
                    width: 10px;
                    vertical-align: middle;
                    height: 15px;
                    margin-left: 15px;
                }
            }
            margin-bottom: 15px;
            li:last-of-type{
                border: 0;
            }
        }
        .applMain:after{
                display:block;
                clear:both;content:"";
                visibility:hidden;
                clear: both;
        } 
        .credentials{
            padding: 10px;
            background: #FFFFFF;
            h1{
                font-size: 14px;
                font-weight: bold;
                text-align: left;
                margin-bottom: 20px;
            }
            .upload-img{
                width:100%;
                // height:7rem;
                overflow:hidden;
                background:#ffffff;
                position:relative;
                .top-tips{
                    width:100%;
                    height:2rem;
                    line-height:2rem;
                    display:flex;
                    .text-l{
                        font-size:0.8rem;
                        color:#000000;
                        margin-left:0.5rem;
                        margin-right:0.5rem;
                    }
                }
                .bottom-upload{
                    // height:5rem;
                    width:100%;
                    position:relative;
                    display:flex;
                    margin-top:0.5rem;
                    .same-box{
                        height:3.5rem;
                        width: 3.5rem;
                        border:1px dashed #CCCCCC;
                        // margin-left:0.5rem;
                        position:relative;
                        // padding:0.1rem;
                        img{
                            width: 3.5rem;height: 3.2rem; 
                            display:block;
                            width:100%;
                            height:100%;
                        }
                        .list-img-close{
                             background: red;
                            height: 15px;
                            width: 15px;
                            position: absolute;
                            top: 0px;
                            right: 0px;
                            background: url("../../../assets/personal/images/addcha.png")  no-repeat;
                            background-size: 100% 100%;
                        }
                        .upload-img{
                            height:3.5rem;
                            width: 3.2rem;
                            display:block;
                            position:absolute;
                            left:0;
                            top:0;
                            opacity:0;
                            z-index: 99;
                        }
                        .jia-icon{
                            background: url("../../../assets/business/images/jia-icon.png") no-repeat center center;
                            background-size: 100% 100%;
                            display: block;
                            width:2rem;
                            height:2rem;
                            position:absolute;
                            left:50%;
                            margin-left:-1rem;
                            top:50%;
                            margin-top:-1rem;
                        }
                    }
                }
                .botre{
                    text-align: right;
                    color: #BDBDBD;
                }
            }
        }
        .credentials:after{
                display:block;
                clear:both;content:"";
                visibility:hidden;
                clear: both;
        } 
        .submet{
            color: #ffffff;
            background: red;
            width: 80%;
            margin: 0 auto;
            margin-top: 30px;
            line-height: 40px;
            border-radius: 5px;
        }
        .LayerThickness{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            background: rgba(0, 0,0, 0.5);
            .LayerThicknessWl{
                width: 100%;
                height: 50%;
                background: #ffffff;
                position: fixed;
                bottom: 0;
                h1{
                    font-size: 14px;
                    font-weight: bold;
                    padding: 15px 0;
                }
                li{
                    border-bottom: 1px solid #F5F5F5;
                    text-align: left;
                    line-height: 15px;
                    padding: 10px;
                    font-weight: bold;
                }
                .options{
                    border-radius: 50%;
                    border:1px solid #BDBDBD;
                    width: 13px;
                    height: 13px;
                    display: block;
                    float: right;
                    vertical-align: middle;
                }
                .optionsACtive{
                    border-radius: 50%;
                    border:1px solid #BDBDBD;
                    width: 13px;
                    height: 13px;
                    display: block;
                    float: right;
                    vertical-align: middle;
                    background: red;
                }
            }
            .close{
                color: #ffffff;
                background: red;
                position: fixed;
                width: 100%;
                line-height: 40px;
                bottom: 0;
            }
        }
 }
</style>
<script>
export default {
    data () {
        return {
            imgUrls:[],//底图
            hwoptions:0,
            hwoptions1:0,
            LayerThicknessOption:false,
            LayerThicknessOption1:false,
            hwMsg:"请选择",
            tkMsg:"请选择",
            instructions:''
        }
    },
    methods:{
      huwxz:function(type){
          if(0==type){
            this.LayerThicknessOption=true
          }else{
            this.LayerThicknessOption1=true
          }
          
      },
      Close:function(type){
          if(0==type){
              this.LayerThicknessOption=false
          }else{
              this.LayerThicknessOption1=false
          }
          
      },
      hwoptionsClic:function(Type){
          this.hwoptions=Type
          if(0==Type){
              this.hwMsg="未收到货"
          }else if(1==Type){
              this.hwMsg="已收到货"
          }else{
              this.hwMsg="未使用"
          }
          this.LayerThicknessOption=!this.LayerThicknessOption
         
          console.log('这是货物选择'+Type)
      },
      hwoptionsClic1:function(Type){
          this.hwoptions1=Type
           if(0==Type){
              this.tkMsg="多拍/错拍/不想要"
          }else if(1==Type){
              this.tkMsg="快递一直未送到"
          }else if(2==Type){
              this.tkMsg="快递无跟踪记录"
          }else if(3==Type){
              this.tkMsg="空包裹、少货"
          }else if(4==Type){
              this.tkMsg="其他"
          }
          this.LayerThicknessOption1=!this.LayerThicknessOption1
          console.log('这是退款原因'+Type)
      },
      delImage: function (index) {
        let vm = this;
        if(confirm("确定删除该图片？")){
          vm.imgUrls.splice(index, 1);
        }
      },
       onFileChange: function (e,targetparam) {
            var files = e.target.files || e.dataTransfer.files;
            console.log(targetparam);
            console.log(this[targetparam]);

            if (!files.length) return;
            this.createImage(files, e,targetparam);
       },
       createImage: function (file, e,targetparam) {
        let vm = this;
        lrz(file[0], {width: 480 })
          .then(function (rst) {
            vm.$http({
              url: vm.APIURL_PREFIX+'/uploadForCertificate',
              method : "post",
              data : rst.formData
            }).then((response) => {
              console.log(response.data.msg+"19999")
              if(0==response.data.code){
                if(targetparam){
                  vm[targetparam]= response.data.msg;
                }
                else{
                    if(vm.imgUrls.length){
                        vm.imgUrls.push(response.data.msg);
                    }
                    else{
                        vm.imgUrls= [response.data.msg];
                    }                
                }
              }
            }).catch(function(err){
              layer.msg("上传失败");
              console.log(err)
            });
            return rst;
          }).always(function () {
          e.target.value = null;
        });
       },
    },
    watch:{
        instructions:function(newVal, ordVal){
           if(this.instructions.length>100){
               this.instructions=ordVal
               layer.msg("超出字数限制")
           }
        },
    }
}
</script>
